import { compose, applyMiddleware } from "redux";
import { thunk } from "redux-thunk";
import { composeWithDevTools } from "@redux-devtools/extension";
import storage from "redux-persist/lib/storage";
import { persistReducer, persistStore } from "redux-persist";
import { combineReducers, configureStore } from "@reduxjs/toolkit";
import localeStore from "./locale";
// 组合各个模块的reducer
const rootReducer = combineReducers({
	localeStore
});

// 开启 redux-devtools
//   const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const composeEnhancers =
	typeof window === "object" && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
		? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({})
		: compose;

// 持久化配置
const persistConfig = {
	key: "root",
	storage,
	whitelist: ["localeStore"]
};

// const persistConfig = {
//   key: 'root'//这是存储在本地存储中的键名，用于标识持久化的状态。这是必需的。

//   storage//这是必需的，指定了用于存储状态的存储机制，例如 localStorage 或 sessionStorage。

//   whitelist: ['user', 'token']//这是一个数组，指定了哪些状态切片应该被持久化。只有列出的状态切片会被保存。

//   blacklist: ['form']//这是一个数组，指定了哪些状态切片不应该被持久化。这些状态切片不会被保存。

//   timeout: 1000//这是一个可选的配置项，指定了在持久化之前等待的时间（以毫秒为单位）。如果在这段时间内状态没有变化，则不会进行持久化。

//   version: 1//这是必需的，如果使用了 serialize 函数，则需要指定版本号。这有助于在状态结构发生变化时进行迁移。

//   migrate: undefined//这是一个可选的函数，用于在版本号变化时迁移状态。

//   serialize: true//这是一个可选的配置项，指定是否使用序列化函数。如果为 true，则状态会被序列化后再保存。

//   deserialize: true//这是一个可选的配置项，指定是否使用反序列化函数。如果为 true，则保存的状态会被反序列化后再使用。

//   enhancer: undefined//这是一个可选的增强器函数，用于增强 Redux store。

//   rehydrate: true//这是一个可选的配置项，指定是否在应用启动时重新加载持久化的状态。

//   debug: false//这是一个可选的配置项，指定是否启用调试模式。如果为 true，则会在控制台输出调试信息。

//   getStoredState: undefined//这是一个可选的函数，用于自定义获取存储状态的方式。

//   setStoredState: undefined//这是一个可选的函数，用于自定义设置存储状态的方式。

//   storageKeyPrefix: undefined//这是一个可选的配置项，用于指定存储键的前缀。
// };
const persistedReducer = persistReducer(persistConfig, rootReducer);
// 把仓库数据，浏览器redux-dev-tools，还有reduxThunk插件关联在store中
// export const store = legacy_createStore(
//   persistedReducer,
//   composeEnhancers(composeWithDevTools(applyMiddleware(thunk)))
// );
export const store = configureStore({
	reducer: persistedReducer,
	middleware: (getDefaultMiddleware) =>
		getDefaultMiddleware({
			serializableCheck: false
		}),
	devTools: composeEnhancers(composeWithDevTools(applyMiddleware(thunk)))
});
export const persistor = persistStore(store);
